 <template>
    <div class="allMovie">
      <div class="top-tab-wrapper">
        <div class="back-wrapper" @click="$router.push('/index/movie')">
          <back :click="false"></back>
        </div>
        <div class="top-tab">
          <div class="top-tab-container">
            <div class="item" @click="_judgeRouter()">
              <router-link class="left" to="onlineMovie">正在热映</router-link>
            </div>
            <div class="item" @click="_judgeRouter()">
              <router-link class="right" to="notOnlineMovie">即将上映</router-link>
            </div>
          </div>
          <div class="line" :class="{'line-left':isActive,'line-right':!isActive}"></div>
        </div>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
    export default {
        name: "allMovie",
        props:{
        },
        data(){
          return{
            isActive:''
          }
        },
        mounted(){
          console.log(this.$route.fullPath)
          this._judgeRouter()
        },
        components:{
          'back':back
        },
        methods:{
          _judgeRouter(){
            if(this.$route.name==='onlineMovie'){
              this.isActive = true
            }else {
              this.isActive = false
            }
          },
        }

    }
</script>

<style scoped lang="stylus">
   .allMovie
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .top-tab-wrapper
      position relative
      padding 10px 0 15px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .top-tab
        position relative
        width 172px
        margin 0 auto
        .top-tab-container
          display flex
          width 172px
        .line
          height 2px
          background #F7C20F
          width 40px
          border-radius 1px
          margin-top 4px
          &.line-left
            position relative
            transition left 0.3s
            left 23px
          &.line-right
            position relative
            transition left 0.3s
            left 109px
        .item
          flex 1
        .left,.right
          text-align center
          color #8B929E
          font-size 16px
          display block
          &.active
            color #F7C20F
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 47px)
</style>
